<template>
  <div style="background: #fff; padding: 20px; box-sizing: border-box">
    <a-row>
      <a-col :span="12">
        <a-select default-value="选择系统 " style="width: 200px;margin-right: 20px;">
          <a-select-option value="1">
            一号系统
          </a-select-option>
          <a-select-option value="2">
            二号系统
          </a-select-option>
        </a-select>
        <a-button type="primary" style="background: #3C67F1;border: none;">查询</a-button>
      </a-col>
      <a-col :span="24" style="text-align: right;margin-bottom: 15px;">
        <a-button icon="export" style="margin-right: 10px;border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;"
                  type="primary" ghost>导出
        </a-button>
      </a-col>
      <a-col :span="24">
        <a-table :rowKey="(record,index)=>{return index}" :columns="columns" :data-source="data" :pagination="false" bordered></a-table>
        <div style="text-align: right;margin-top: 15px">
          <a-pagination v-model="pageNo" :total="total" @change="onShowSizeChange" show-less-items/>
        </div>
      </a-col>
      <!--      <a-col :span="24">-->
      <!--        <div-->
      <!--          style="width: 140px;height: 50px;display: flex; margin: 20px auto;align-items: center;justify-content: space-between;font-size: 20px;font-weight: bolder;">-->
      <!--          <img src="../../../assets/icon/bg.png"/>变化趋势图-->
      <!--        </div>-->
      <!--      </a-col>-->
      <!--      <a-col :span="24">-->
      <!--        <div style="width: 100%;height: 30vh" id="analysis"></div>-->
      <!--      </a-col>-->
    </a-row>
  </div>
</template>
<script>
const columns = [
  {
    title: '生育期',
    dataIndex: 'birthTime',
  },
  {
    title: '日期',
    dataIndex: 'createDate',
  },
  {
    title: '含量（kg/亩）',
    dataIndex: 'contentK',
  },
  {
    title: '阀值（dan）',
    dataIndex: 'thresholdP',

  },
  {
    title: '含磷量（kg/亩）',
    dataIndex: 'contentN',
  },
  {
    title: '阀值',
    dataIndex: 'thresholdN',
  },
  {
    title: '含钾量（kg/亩）',
    dataIndex: 'contentP',
  },
  {
    title: '阀值（钾）',
    dataIndex: 'thresholdK',
  }
]

const data = []
import {hspConcentration} from '@/api/meteorological'

export default {
  data() {
    return {
      modal2Visible: false,
      data,
      columns,
      pageNo: 1,
      pageSize: 10,
      total: 0,
    }
  },
  mounted() {
    // 折线图
    // this.analysis()
    this.dataList(this.pageNo, this.pageSize)
  },
  methods: {
    // 分页
    onShowSizeChange(pageNo, pageSize) {
      this.dataList(pageNo, pageSize)
    },
    dataList(pageNo, pageSize) {
      hspConcentration(pageNo, pageSize).then(res => {
        console.log(res)
        this.data = res.result.records
        this.total = res.result.total
      }).catch(err => {

      })
    },
    // 折线图
    // analysis() {
    //   var echarts = require('echarts')
    //   var roseCharts = document.getElementById('analysis') // 对应地使用ByClassName
    //   // 通过for循环，在相同class的dom内绘制元素
    //   var myChart = echarts.init(roseCharts)
    //
    //   myChart.setOption({
    //     grid: {
    //       left: '2%',
    //       bottom: '8%',
    //       top: '20%',
    //       right: '2%'
    //     },
    //     // color: ['#298DFF', ' #33CA66','yellow'],
    //     barWidth: 14,
    //     title: {
    //       // text: '世界人口总量',
    //       // subtext: '数据来自网络'
    //     },
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'shadow'
    //       }
    //     },
    //     legend: {
    //       // left: '0%',
    //       top: '10',
    //       x: 'center', //可设定图例在左、右、居中
    //       textStyle: {
    //         //图例文字的样式
    //         color: '#8C8C8C',
    //         fontSize: 12
    //       },
    //       data: ['含痰量', '含磷量', '含钾量']
    //     },
    //     xAxis: {
    //       type: 'category',
    //       splitLine: {
    //         show: false // 去除网格线
    //       },
    //       axisLine: {
    //         lineStyle: {
    //           type: 'solid',
    //           color: '#BFBFBF', // 坐标线的颜色
    //           width: '1'
    //         }
    //       },
    //       axisLabel: {
    //         textStyle: {
    //           color: '#595959' //坐标值的颜色
    //         },
    //         formatter: function (params) {
    //           var newParamsName = ''
    //           var paramsNameNumber = params.length //总字数
    //           var provideNumber = 5 //一行显示几个字
    //           var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
    //           if (paramsNameNumber > provideNumber) {
    //             for (var p = 0; p < rowNumber; p++) {
    //               var tempStr = ''
    //               var start = p * provideNumber
    //               var end = start + provideNumber
    //               if (p == rowNumber - 1) {
    //                 tempStr = params.substring(start, paramsNameNumber)
    //               } else {
    //                 tempStr = params.substring(start, end) + '\n'
    //               }
    //               newParamsName += tempStr
    //             }
    //           } else {
    //             newParamsName = params
    //           }
    //           return newParamsName
    //         }
    //       },
    //       boundaryGap: [0, 0.01],
    //       data: ['苗期', '分藻期', '拔节期', '孕穗期', '抽穗期', '灌浆期', '成熟期']
    //     },
    //     yAxis: {
    //       type: 'value',
    //       splitLine: {
    //         // show: false // 去除网格线
    //         lineStyle: {
    //           color: '#E8E8E8',
    //           type: 'dashed' //设置间隔线为虚线
    //         }
    //       },
    //       axisTick: {
    //         show: false //小横线
    //       },
    //       splitArea: {
    //         // show: true // 保留网格区域
    //       },
    //       axisLine: {
    //         show: false, // 去除纵向边框线
    //         lineStyle: {
    //           type: 'solid',
    //           color: '#BFBFBF', // 坐标线的颜色
    //           width: '1'
    //         }
    //       },
    //       axisLabel: {
    //         textStyle: {
    //           color: '#595959' //坐标值的颜色
    //         }
    //       }
    //     },
    //     series: [
    //       {
    //         name: '含痰量',
    //         type: 'bar',
    //         label: {
    //           show: false,
    //           position: 'right', // 位置
    //           color: '#298DFF',
    //           fontSize: 12,
    //           fontWeight: 'normal', // 加粗
    //           distance: 5, // 距离
    //           offset: [0, 1] // 偏移距离[横向，纵向]
    //         }, // 柱子上方的数值
    //         itemStyle: {
    //           normal: {
    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //               {
    //                 offset: 0,
    //                 color: '#248ff7'
    //               },
    //               {
    //                 offset: 1,
    //                 color: '#6851f1'
    //               }
    //             ])
    //           }
    //         },
    //         data: [30, 40, 30, 22, 60]
    //       },
    //       {
    //         name: '含磷量',
    //         type: 'bar',
    //         label: {
    //           show: false,
    //           position: 'right', // 位置
    //           color: '#33CA66',
    //           fontSize: 12,
    //           fontWeight: 'normal', // 加粗
    //           distance: 5, // 距离
    //           offset: [0, 2] // 偏移距离[横向，纵向]
    //         }, // 柱子右方的数值
    //         itemStyle: {
    //           normal: {
    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //               {
    //                 offset: 0,
    //                 color: '#8bd46e'
    //               },
    //               {
    //                 offset: 1,
    //                 color: '#09bcb7'
    //               }
    //             ])
    //           }
    //         },
    //         data: [20, 20, 20, 20, 10]
    //       },
    //       {
    //         name: '含钾量',
    //         type: 'bar',
    //         label: {
    //           show: false,
    //           position: 'right', // 位置
    //           color: '#33CA66',
    //           fontSize: 12,
    //           fontWeight: 'normal', // 加粗
    //           distance: 5, // 距离
    //           offset: [0, 2] // 偏移距离[横向，纵向]
    //         }, // 柱子右方的数值
    //         itemStyle: {
    //           normal: {
    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //               {
    //                 offset: 0,
    //                 color: '#fccb05'
    //               },
    //               {
    //                 offset: 1,
    //                 color: '#f5804d'
    //               }
    //             ])
    //           }
    //         },
    //         data: [6, 22, 21, 20, 10]
    //       }
    //     ]
    //   })
    // }
  }
}
</script>